<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv = "Content-Type"
      content    = "text/html; charset=iso-8859-1"
/>
<title>Widget.Timer Example - Burak G&#252;rsoy</title>

<link rel="Prev"       href="http://search.cpan.org/~burak"              />
<link rel="Start"      href="http://www.openjsan.org/doc/b/bu/burak/"    />
<link rel="Next"       href="http://www.mutasyon.net/"                   />
<link rel="Help"       href="http://forum.mutasyon.net/"                 />
<link rel="Copyright"  href="http://dev.perl.org/licenses/artistic.html" />
<link rel="Author"     href="http://gursoy.org"                          />

<style type="text/css">
   body, p, td, div {
      font-family      : verdana, serif;
      font-size        : 12px;
      background       : #fefefe;
   }
   span {
      font-family      : verdana, serif;
      background       : #fefefe;
   }
   body {
      vertical-align   : middle;
   }
   #admin_timeout {
      color            : #66FF66;
      font-weight      : bold;
      font-size        : 16px;
      background-color : #000000;
      border-style     : outset;
      border-color     : #f7f7f7 #ffffff #ffffff #f7f7f7;
   }
   #nice {
      color            : #ABEEF3;
      font-weight      : bold;
      font-size        : 50px;
      background-color : #797979;
      border           : 20px;
      border-style     : outset;
      border-color     : #CFDEDC #ffffff #ffffff #CFDEDC;
      padding          : 0px 10px 0px 10px;
   }
   #nice_blink {
      background-color : #797979;
      color            : #797978;
   }
   #nice_blink2 {
      background-color : #797979;
      color            : #ABEEF3;
   }
   #test {
      font-family      : "Old English Text MT", verdana, serif;
      font-size        : 60px;
   }
   img {
      border           : 0;
   }
   div.wrapout {
      width            : 98%;
      border           : 10px solid #64BDFF;
      text-align       : center;
      vertical-align   : middle;
   }
   div.wrapin {
      vertical-align   : middle;
      border           : 10px solid white;
      text-align       : left;
   }
   p.author {
      font-family      : verdana, serif;
      font-weight      : bold;
      font-size        : 16px;
   }
</style>
<script type="text/javascript" src="../lib/Widget/Timer.js"></script>
</head>
<body>
<div class="wrapout">
<div class="wrapin">
<p class="author">
Widget.Timer
<script type="text/javascript">
//<![CDATA[
document.write( 'v' + Widget.Timer.VERSION );
//]]>
</script>
by Burak G&#252;rsoy.
</p>
<p>
Latest version of this module is always available from
<a href="http://burakcode.googlecode.com/" title="BurakCode">burakcode.googlecode.com</a>.
You can use unlimited number of timer widgets.
Just alter the <code>target</code> parameter.<br />
The timers below are created with this code:
</p>
<pre>
   Widget.Timer.timer({ hour: 0, minute:  1, second: 3});
   Widget.Timer.timer({ hour: 0, minute: 10, second: 3, target : 'test'});
   Widget.Timer.timer({ hour: 1, minute:  0, second: 3, target : 'nice'});
</pre>
<p>
It is possible to change the display via CSS.
You can create your own timers:
<br />
</p>

<span id="admin_timeout"></span><noscript><div>   01:03</div></noscript>&#160;&#160;
<span id="test"         ></span><noscript><div>   10:03</div></noscript>&#160;&#160;
<span id="nice"         ></span><noscript><div>01:00:03</div></noscript>&#160;&#160;

<script type="text/javascript">
//<![CDATA[

var barray = ['nice_blink', 'nice_blink2'];

Widget.Timer.timer({ hour: 0, minute:  1, second: 3                                });
Widget.Timer.timer({ hour: 0, minute: 10, second: 8, target: 'test'                });
Widget.Timer.timer({ hour: 1, minute:  0, second: 5, target: 'nice', blink: barray });

//]]>
</script>

  <p>
    <a href    = "http://validator.w3.org/check?uri=referer"><img
        src    = "http://www.w3.org/Icons/valid-xhtml11"
        alt    = "Valid XHTML 1.1"
        height = "31"
        width  = "88"
        /></a>

 <a href  = "http://jigsaw.w3.org/css-validator/check/referer"><img
    style = "border:0;width:88px;height:31px"
    src   = "http://jigsaw.w3.org/css-validator/images/vcss"
    alt   = "Valid CSS!" />
 </a>

  </p>

</div>
</div>
</body>
</html>
